<template>
  <div>
    <el-container>
      <el-header style="margin-top: 10px;height: auto;">
        <el-row>
          <el-form :model="searchParams" inline>
            <el-form-item label="搜索词">
              <el-input v-model="searchParams.search_keyword" placeholder="关键词" />
            </el-form-item>
            <el-form-item label="公司名称搜索">
              <el-input v-model="searchParams.name" placeholder="公司名称搜索" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="listLoading" @click="handleSearch">搜索</el-button>
              <el-button
                type="primary"
                class="el-icon-plus add-btn"
                :disabled="listLoading"
              >创建发送任务
              </el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-alert v-if="total" center type="warnning">当前查询数据总数:{{ total }}</el-alert>
          </el-col>
          <el-col :span="6">
            <el-button v-if="total > 20" type="primary" :loading="listLoading" @click="handleSearchNext">下一页</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-table v-loading="listLoading" :data="data" border fit highlight-current-row>
          <el-table-column align="center" label="进口商" width="250" prop="name" />
          <el-table-column align="center" label="国家" prop="country" sortable="custom" />
          <el-table-column align="center" label="地址" width="150" prop="address" sortable="custom" />
          <el-table-column align="center" label="搜索词" width="200" prop="search_keyword" sortable="custom" />
          <el-table-column align="center" label="交易次数" width="150" prop="totalTradeCount" sortable="custom" />
          <el-table-column align="center" label="交易额" width="150" prop="totalPrice" sortable="custom" />
          <el-table-column align="center" label="操作" fixed="right" width="200">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-edit"
                type="danger"
                plain
              >Google
              </el-button>
              <el-button
                size="mini"
                icon="el-icon-edit"
                type="danger"
                plain
              >发询盘
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { CommonTableStore } from '@/api/crm/crmcommontablestoredata'

export default {
  name: 'Ioftdata',
  data() {
    return {
      data: [],
      listLoading: false,
      // pagination
      pagesize: 20,
      page: 1,
      total: 0,
      searchParams: {
        countryCode: '',
        country: '',
        name: '',
        oneProductDesc: '',
        rname: '',
        forCompany: '',
        isChecked: false
      }
    }
  },
  methods: {
    getList() {
      this.listLoading = true
      this.searchParams.page = this.page
      this.searchParams.table_name = 'ioftdata'
      CommonTableStore(this.searchParams)
        .then(response => {
          this.data = response.data.data
          this.listLoading = false
          this.total = response.data.total
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    // 点击搜索
    handleSearch() {
      this.page = 1
      this.getList()
    },
    handleSearchNext() {
      this.page += 1
      this.getList()
    }
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.top >>> .sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}
.top >>> .el-select .el-input {
  width: 350px;
}

.top >>> .input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.top {
  padding-left: 20px;
  margin-bottom: 30px;
  margin-top: 28px;
}

.input-with-select {
  width: calc(100% - 200px);
}

.add-btn {
  float: right;
  margin-right: 20px;
  width: 150px
}

.mt-pagination {
  float: right;
  margin-top: 5px;
}

.app-container >>> .el-dialog {
  margin-top: 48px !important;
  margin-bottom: 68px;
}

.mt-dialog >>> .el-transfer-panel {
  width: calc(50% - 60px);
}

.mt-form >>> .el-select {
  width: 100%;
}

.mt-form >>> .el-input__inner {
  width: 100%;
}

.mt-dialog >>> .el-dialog {
  margin-top: 60px;
  /*margin: 168px auto !important;*/
}

.mt-dialog >>> .el-dialog__body {
  padding-bottom: 100px;
}
</style>
